 $(function(){
     var layer=layui.layer
 // 1.1 获取裁剪区域的 DOM 元素
 var $image = $('#image')
 // 1.2 配置选项
 const options = {
   // 纵横比
   aspectRatio: 1,
   // 指定预览区域
   preview: '.img-preview'
 }

 // 1.3 创建裁剪区域
 $image.cropper(options)



//  为上传按钮添加点击事件
 $('#btnChooseImage').on('click', function() {
   $('#file').click()
 })



 //给file添加事件
$('#file').on('change',function(e){
    if(e.target.files.length===0){
        return layer .msg('请选择照片')
    }
    var file = e.target.files[0]
    var newImgURL = URL.createObjectURL(file)
    // 3. 重新初始化裁剪区域
  $image
  .cropper('destroy') // 销毁旧的裁剪区域
  .attr('src', newImgURL) // 重新设置图片路径
  .cropper(options) // 重新初始化裁剪区域
})

//给确定按钮添加点击事件
$('#queding').on('click',function(){
    var dataURL = $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')
      //上传头像
      $.ajax({
        method: 'POST',
        url: '/my/update/avatar',
        data: {
          avatar: dataURL
        },
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('更换头像失败！')
          }
          layer.msg('更换头像成功！')
          window.parent.getUserInfo()
        }
      })
})
 })
